import React, { Component } from 'react'
// 类似Vue的插槽，预留一个位置放东西。
export default class Parent extends Component {
  render() {
    return (
      <div>
        父组件
        {/* A组件以及B组件这样可以形成父子关系 */}
        {/* 假如A是一个封装好的组件，但是已经预留一个位置，我们可以通过这个东西传一个组件进去。 */}
        <A render={(name) => <B name={name} />} />
      </div>
    )
  }
}

class A extends Component {
  state = {
    name: 'A => B'
  }
  render() {
    return (
      <div>
        <h2>A组件</h2>
        {this.props.render(this.state.name)}
      </div>
    )
  }
}

class B extends Component {
  render() {
    return (
      <div>
        <h2>B组件</h2>
        {this.props.name}
      </div>
    )
  }
}
